<template>
	<view class="address-edit">
		<section class="address-form">
			<view class="cell">
				<view class="label">地址</view>
				<view class="value other" @click="handle_select_address">
					<view class="main-address">{{address != "" ? address : '请选择地址'}}</view>

					<up-image src="/static/address/icon_right_arrow.svg" width="12px" height="20px"></up-image>
				</view>
			</view>

			<view class="cell">
				<view class="label">门牌号</view>
				<view class="value input">
					<up-input placeholder="填写详细地址, 例:1层102室" v-model="detailed_address" @change="handle_input_address" fontSize="13px" border="none" clearable></up-input>
				</view>
			</view>

			<view class="cell">
				<view class="label">收货人</view>
				<view class="value other">
					<view class="name">
						<up-input placeholder="请填写收货人姓名" v-model="name" @change="handle_input_name" fontSize="13px" border="none" clearable></up-input>
					</view>
					<view class="sex">
						<view :class="sex==1 ? 'sex-item active' : 'sex-item'" @click="sex = 1">
							<view class="sex-circle"></view>
							先生
						</view>
						<view :class="sex==2 ? 'sex-item active' : 'sex-item'" @click="sex = 2">
							<view class="sex-circle"></view>
							女士
						</view>
					</view>
				</view>
			</view>

			<view class="cell ">
				<view class="label">手机号</view>
				<view class="value border-none input">
					<up-input placeholder="填写正确的收货人号码" v-model="mobile" @change="handle_input_mobile" fontSize="13px" border="none" type="number" clearable></up-input>
				</view>
			</view>
		</section>

		<section class="extra-info">
			<view class="cell" style="margin-bottom: 40rpx;">
				<view class="label">标签</view>
				<view class="value border-none radio">
					<view :class="address_tag == 'home' ? 'radio-item active' : 'radio-item'"
						@click="address_tag = 'home'">家</view>
					<view :class="address_tag == 'company' ? 'radio-item active' : 'radio-item'"
						@click="address_tag = 'company'">公司</view>
					<view :class="address_tag == 'school' ? 'radio-item active' : 'radio-item'"
						@click="address_tag = 'school'">学校</view>
				</view>
			</view>

			<u-button text="保存地址" color="#333333" :disabled="address == '' || detailed_address == '' || name == '' || mobile == ''"
				type="primary" shape="circle" @click="handle_save_address"></u-button>
		</section>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import { save_address } from "../common/api";
	
	const category = ref(uni.getStorageSync('current_address') ? 'edit' : 'add')
	const address_id = ref(uni.getStorageSync('current_address').address_id || "0")
	const address = ref(uni.getStorageSync('current_address').shipping_address || "");
	const detailed_address = ref(uni.getStorageSync('current_address').shipping_address_detail || "");
	const name = ref(uni.getStorageSync('current_address').shipping_name || "");
	const sex = ref(uni.getStorageSync('current_address').shipping_sex || 1);
	const mobile = ref(uni.getStorageSync('current_address').shipping_mobile || "");
	const address_tag = ref(uni.getStorageSync('current_address').address_tag || "home"); // home家 company公司 school学校
	
	// 选择地址
	const handle_select_address = () => {
		uni.chooseLocation({
			success: function (res) {
				address.value = res.name
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
			},
			fail: function(err) {
				console.log("获取位置信息失败")
				console.log(err)
			}
		});
	}
	
	// 获取输入框输入的值
	const handle_input_address = (value) => { detailed_address.value = value }
	const handle_input_name = (value) => { name.value = value }
	const handle_input_mobile = (value) => { mobile.value = value }
	
	
	// 保存地址 | 新建地址
	const handle_save_address = async () => {
		
		console.log("#######################")
		console.log(category.value)
		console.log(address_id.value)
		console.log(address.value)
		console.log(detailed_address.value)
		console.log(name.value)
		console.log(sex.value)
		console.log(mobile.value)
		console.log(address_tag.value)
		uni.showLoading({
			title: '保存中...'
		})
		save_address({
			address_id: address_id.value,
			shipping_address: address.value,
			shipping_address_detail: detailed_address.value,
			shipping_name: name.value,
			shipping_mobile: mobile.value,
			shipping_sex: sex.value,		// 男1女2  int类型
			address_tag: address_tag.value,
			user_id: "772"
		
		}).then(() => {
			uni.hideLoading();
			uni.redirectTo({
				url: '/pages/Tank/address/address_list',
				animationType: "pop-in",
				animationDuration: 200
			});
		
		})
		

	}
	

	
</script>

<style lang="scss">
	.address-edit {
		width: 100%;
		height: 100vh;
		background-color: #f3f4f6;
		padding: 10px;
		box-sizing: border-box;

		.address-form,
		.extra-info {
			width: 100%;
			height: fit-content;
			background-color: #fff;
			border-radius: 8px;
			padding: 5px 15px;
			box-sizing: border-box;

			.cell {
				width: 100%;
				height: 90rpx;
				display: flex;
				;
				align-items: center;

				.label {
					width: 120rpx;
					height: 100%;
					display: flex;
					;
					align-items: center;
					font-size: 13px;
					color: #333333;
					font-weight: 550;

				}

				.value {
					width: calc(100% - 120rpx);
					height: 100%;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f3f4f6;
					font-size: 13px;
					color: #333333;

					.main-address {
						width: calc(100% - 20px);
						height: 100%;
						display: flex;
						align-items: center;
					}

					.name {
						width: calc(100% - 215rpx);
						height: 100%;
						display: flex;
						;
						align-items: center;
					}

					.sex {
						width: 200rpx;
						height: 100%;
						display: flex;
						align-items: center;
						;
						justify-content: space-between;

						.sex-item {
							width: fit-content;
							;
							height: 100%;
							display: flex;
							;
							align-items: center;

							.sex-circle {
								width: 23rpx;
								height: 23rpx;
								border-radius: 100%;
								border: 0.5px solid #ccc;
								margin-right: 10rpx;
								position: relative;
								transition: 0.5s
							}

							;

						}

						.sex-item.active {
							.sex-circle {
								border: 0.5px solid #333333;
							}

							.sex-circle::before {
								content: "";
								width: 14rpx;
								height: 14rpx;
								background-color: #333333;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								border-radius: 100%;

							}
						}
					}

					.radio-item {
						width: 85rpx;
						height: 45rpx;
						font-size: 12px;
						border-radius: 4px;
						border: 1px solid #f3f4f6;
						color: #333333;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 25rpx;
					}

					.radio-item.active {
						border: 0.5px solid #333333;
						background: rgba(51, 51, 51, 0.1);
						color: #333333
					}

				}

				.value.border-none {
					border: none
				}

				.value.other {
					justify-content: space-between;
				}

				.value.radio {
					justify-content: flex-start;
				}
			}
		}

		.extra-info {
			margin-top: 20rpx;
			padding-bottom: 40rpx;

		}

	}
</style>